export default {
  name: "Home",
  props: {
    message: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      value: "",
      info: {
        age: 18,
        gender: "",
      },
      arr: [
        { name: "张三", age: 18 },
        { name: "李四", age: 19 },
        { name: "王五", age: 20 },
      ],
      visible: false,
    };
  },
  methods: {
    getGender() {
      this.info.gender = "男";
    },
    genderDom() {
      return this.info.gender ? <div>我是{this.info.gender}性</div> : "";
    },
    openDialog() {
      this.visible = true;
    },
    closeDialog() {
      this.visible = false;
    },
    $_renderFooter() {
      return (
        <div>
          <el-button>确定</el-button>
          <el-button onClick={() => this.closeDialog()}>取消</el-button>
        </div>
      );
    },
  },
  render() {
    const buttons = this.$_renderFooter();
    return (
      <div className="home">
        <h1>{this.message}</h1>
        <div>我是小明，我今年{this.info.age}岁</div>
        <div style={{ display: this.info.gender ? "block" : "none" }}>
          我是
          {this.info.gender}性
        </div>
        <button onClick={this.getGender}>查询我的性别</button>
        <ul>
          {this.arr.map((item) => (
            <li>
              {item.name} {item.age}
            </li>
          ))}
        </ul>
        <div className="hobby">我的爱好是：{this.value}</div>
        <el-input v-model={this.value} />
        <el-button onClick={() => this.openDialog()}>打开Dialog</el-button>
        <el-dialog title="标题" visible={this.visible}>
          <div>弹窗内容</div>
          <template slot="footer">{buttons}</template>
        </el-dialog>
      </div>
    );
  },
};
